<template>
    <!-- 导航栏 -->
    <van-nav-bar title="个人中心" left-arrow @click-left="back" />
    <!-- 头部 -->
    <div class="myBox" :style="{ background: 'url(' + LoginUser.cover + ')' }" style="background-size: cover">
        <div class="avatar">
            <img :src="LoginUser.avatar" style="width: 100%;height: 100%;object-fit: cover;"/>
        </div>
    </div>
    <div class="clear"></div>
    <div class="form">
        <van-form @submit="profile">
            <!-- 昵称 -->
            <van-cell-group>
                <van-field
                    label="昵称"
                    v-model="LoginUser.nickname"
                    name="nickname"
                    placeholder="请输入昵称"
                />
            </van-cell-group>

            <!-- 邮箱 -->
            <van-cell-group>
                <van-field label="邮箱" v-model="LoginUser.email" name="email" placeholder="请输入邮箱" readonly />
            </van-cell-group>

            <!-- 登录密码： -->
            <van-cell-group>
                <van-field
                    label="登陆密码"
                    v-model="LoginUser.password"
                    name="password"
                    type="password"
                />
            </van-cell-group>

            <!-- 性别 -->
            <van-field name="sex" label="性别">
                <template #input>
                    <van-radio-group v-model="LoginUser.sex" direction="horizontal">
                        <van-radio name="0">保密</van-radio>
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>

            <!-- 地区 -->
            <van-field
                v-model="LoginUser.region"
                readonly
                name="region"
                label="地区选择"
                placeholder="点击选择省市区"
                @click="showArea = true"
            ></van-field>

            <!-- 省市区 -->
            <van-popup v-model:show="showArea" position="bottom">
                <van-area :area-list="areaList" @confirm="region" @cancel="showArea = false" />
            </van-popup>

            <!-- 个人简介 -->
            <van-field
                v-model="LoginUser.content"
                name = "content"
                rows="2"
                autosize
                label="个人简介"
                type="textarea"
                maxlength="50"
                placeholder="请输入个人简介"
                show-word-limit
            />
            
            <!-- 头像 -->
            <van-field name="avatar" label="头像">
                <template #input>
                    <van-uploader v-model="avatar" :max-count="1" />
                </template>
            </van-field>

            <!-- 封面 -->
            <van-field name="cover" label="封面">
                <template #input>
                    <van-uploader v-model="cover" :max-count="1" />
                </template>
            </van-field>

            <van-button round block type="primary" native-type="submit">修改资料</van-button>
        </van-form>
    </div>
</template>
<script>
import { areaList } from '@vant/area-data';
export default {
    name: 'BaseProfile',
    emits: ['toggle'],
    created() {
        this.$emit('toggle', false)
        this.LoginUser = this.$cookies.get('LoginUser')
    },
    data() {
        return {
            LoginUser: {},
            areaList,
            showArea: false,
            avatar: [{
                url: this.$cookies.get('LoginUser'). avatar,
            }],
            cover: [{
                url: this.$cookies.get('LoginUser'). cover,
            }]
        }
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        // 修改资料
        async profile(val) {

            let data = {
                id: this.LoginUser.id,
                nickname: val.nickname,
                email: this.LoginUser.email,
                region: val.region,
                province: this.LoginUser.province,
                city: this.LoginUser.city,
                district: this.LoginUser.district,
                sex: val.sex,
                content: val.content
            }

            // 修改密码
            if(val.password){
                data.password = val.password
            }
            
            // 头像
            if(this.avatar[0].file){
                data.avatar = this.avatar[0].file
            }

            // 封面
            if(this.cover[0].file){
                data.cover = this.cover[0].file
            }

            var result = await this.$api.profile(data);

            if(result.code == '1'){
                // 存cookies，用户信息
                this.$cookies.set('LoginUser', result.data)
                this.$notify({
                    type: 'success',
                    message: result.msg,
                    duration: 1000,
                    onClose: () => {
                        this.$router.push(result.url)
                    }
                })
            } else{
                this.$notify({
                    type: 'danger',
                    message: result.msg,
                    duration: 1000
                })
            }
        },
        // 修改省市区
        region(areaValues) {
            this.showArea = false
            var region = ''
            let [province,city,district] = areaValues

            // 省
            if(province){
                region +=province.name + '-'
                this.LoginUser.province = province.code
            }
            // 市
            if(city){
                region +=city.name + '-'
                this.LoginUser.city = city.code
            }
            // 区
            if(district){
                region +=district.name
                this.LoginUser.district = district.code
            }
            
            this.LoginUser.region = region
        }
    }
}
</script>
<style>
    .profile {
        padding-bottom: 5em;
    }

    .myBox .avatar {
        width: 8em;
        height: 8em;
        margin: 0 auto;
        border-radius: 100%;
        overflow: hidden;
    }
</style>